<template>
  <div class="swipe">
    <van-swipe class="swipe-list" :autoplay="3000">
      <template v-for="(item, index) in swipeData" :key="index">
        <van-swipe-item class="item">
          <img :src="item.url" alt="">
        </van-swipe-item>
      </template>

      <template #indicator="{ active, total }">
        <div class="indicator">
          {{ active + 1 }}/{{ total }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
  defineProps({
    swipeData: {
      type: Array,
      default: () => []
    }
  })

  // 对数据进行分类
  // const swipeGroup = {}

  // for (const item of swipeData) {
  //   swipeGroup[item.enumPictureCategory] = []
  // }

  // for (const item of swipeData) {
  //   const valueArray = swipeGroup[item.enumPictureCategory]
  //   valueArray.push(item)
  // }
  
</script>

<style lang="less" scoped>
  .swipe {
    .swipe-list {
      .item {
        img {
          width: 100%;
        }
      }
      
    }

    .indicator {
      color: #fff;
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
  }
</style>